<template>
<div style="width: 1140px;height: 850px;">
  <div style="width: 96%;height: 7%;margin: 0 auto;margin-top: -3%">
    <dv-border-box-2>
      <dv-scroll-board :config="config" style="width:80%;height:50%;margin: 0 auto;padding-top: 10px" />

      <div style="display: flex;float: right;margin-top: -30px;margin-right: 30px">
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </div>
    </dv-border-box-2>

  </div>
  <dv-border-box-12>
    <div style="width: 96%;height: 94%;margin: 0 auto;padding-top: 2%;">

      <div id="amapContainer" style="width: 100%;height: 100%;">
      </div>

      <div class="block">
        <el-cascader
          v-model="centers"
          :options="options"
          :show-all-levels="false"
          @change="handleChange"></el-cascader>
      </div>

    </div>
  </dv-border-box-12>
</div>
</template>

<script>
  import Vue from 'vue';
  // 引入vue-amap高德地图
  import VueAMap from 'vue-amap';
  import { lazyAMapApiLoaderInstance } from 'vue-amap';
  // import { AMapManager } from 'vue-amap';

  Vue.use(VueAMap);



  // 初始化vue-amap
  VueAMap.initAMapApiLoader({
    // 高德的key
    key: '401693c8e175d10fcbc303b88f094ddc',
    // 插件集合
    plugin: ['AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
    // 高德 sdk 版本，默认为 1.4.4
    v: '1.4.4'
  });


    export default {
        name: "right",
        data(){
          return{
            centers:[],
            options: [],
            "config":{
              data: [
                ['<span style="color:red;font-size: 20px">警告：库尔勒市蚜虫灾害等级为4级</span>'],
                ['<span style="color:red;font-size: 20px">警告：库尔勒市蚜虫灾害等级为4级</span>'],
                ['<span style="color:red;font-size: 20px">警告：库尔勒市蚜虫灾害等级为4级</span>'],
                ['<span style="color:red;font-size: 20px">警告：库尔勒市蚜虫灾害等级为4级</span>'],
                ['<span style="color:red;font-size: 20px">警告：库尔勒市蚜虫灾害等级为4级</span>'],
                ['<span style="color:red;font-size: 20px">警告：库尔勒市蚜虫灾害等级为4级</span>'],
                ['<span style="color:red;font-size: 20px">警告：库尔勒市蚜虫灾害等级为4级</span>'],
                ['<span style="color:red;font-size: 20px">警告：库尔勒市蚜虫灾害等级为4级</span>'],
                ['<span style="color:red;font-size: 20px">警告：库尔勒市蚜虫灾害等级为4级</span>'],
                ['<span style="color:red;font-size: 20px">警告：库尔勒市蚜虫灾害等级为4级</span>'],
                ['<span style="color:red;font-size: 20px">警告：库尔勒市蚜虫灾害等级为4级</span>'],
                ['<span style="color:red;font-size: 20px">警告：库尔勒市蚜虫灾害等级为4级</span>'],
                ['<span style="color:red;font-size: 20px">警告：库尔勒市蚜虫灾害等级为4级</span>'],
              ],
              rowNum:1,
              // index: true,
              oddRowBGC:'#081F5D',
              evenRowBGC:'#081F5D',
            },
            value1: '',
          }
        },
        methods: {
          getGeo(){
            this.$axios({
              url: 'static/geoinfo/geoinfo-all.json',
              method: 'get',
            }).then(({ data }) => {
              if (data){
                // console.log("123456");
                this.options = data;
                // console.log(this.options);
              }else {
                this.options = [];
              }
            })
          },
          initmap(){

            // let amapManager = new VueAMap.AMapManager();
            lazyAMapApiLoaderInstance.load().then(() => {
              var marker;
              var imageLayer = new AMap.ImageLayer({
                resizeEnable: true,
                url: 'http://172.23.76.129:8080/static/yahai.png',
                bounds: new AMap.Bounds(
                  [85.276811,41.290247],
                  [86.394447,42.250888]
                ),
                zIndex:2,
                zooms: [5, 19]
              });


              this.map = new AMap.Map('amapContainer', {
                center: new AMap.LngLat(85.903182,41.743537),
                layers: [
                  // 卫星
                  new AMap.TileLayer.Satellite(),
                  // 路网
                  new AMap.TileLayer.RoadNet(),
                  //图片图层
                  imageLayer,
                ],
                zoom: 10
              });

              // 创建一个 Icon
              var Icon = new AMap.Icon({
                // 图标尺寸
                size: new AMap.Size(25, 34),
                // 图标的取图地址
                image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
                // 图标所用图片大小
                imageSize: new AMap.Size(25, 34),
                // 图标取图偏移量
                imageOffset: new AMap.Pixel(0, 0)
              });

              marker = new AMap.Marker({
                icon: Icon,
                position: [85.903182,41.743537],
                offset: new AMap.Pixel(-13, -30),
              });
              // marker.setMap(map);
              this.map.add(marker);

            });

            // function pos(center){
            //
            // }
          },


          handleChange(centers) {
            // console.log(centers);
          }
      },
      watch: {
        // 如果 `centers` 发生改变，这个函数就会运行
        centers: function (newCenters, oldCenters) {
          var n = newCenters.length;
          console.log(newCenters);
          var str = newCenters[n-1];
          var arr = str.split(",");
          console.log(arr);
          //设置中心点
          this.map.setCenter([arr[0],arr[1]]);
        }
      },
      mounted() {
          this.initmap();
          this.getGeo();
      }

    }


</script>

<style scoped>
  .block{
    display: block;
    position: relative;
    top: -780px;
    left: 20px;
    z-index: 10001;
  }
</style>
